// 完成添加功能
// 获取添加按钮
const btn = document.querySelector(".inputs");
// 更新视图区域
const commentOn = document.querySelector(".commentOn");
const contextArea = document.querySelector("#tijiaoText");
let contentList = [];// 保存微博列表信息
btn.onclick = function () {
	// 1- 收集数据
	// 收集的微博信息
	const context = contextArea.value.trim();
	// 判断是否为空字符串
	if (context.length === 0) {
		alert("请输入微博信息");
		return;
	}
	// 判断当前微博列表中是否拥有该微博信息
	if (contentList.some(item => item.context === context)) {
		alert("请不要输入相同的微博信息");
		return;
	}
	// 2- 添加数据:在原来的数组的基础上实现头部添加
	contentList = [
		{
			// 唯一标识
			id: Math.random().toString(36).slice(2) + Date.now(),
			context,// 微博内容
			topNum: 0,// 顶，初始值为0
			downNum: 0,// 顶，初始值为0
			addTime: getNowTime()// 添加的时间
		},
		...contentList
	];
	// 清空文本框数据
	contextArea.value = null;
	// 3- 更新视图
	render();
}

// 根据ID删除微博信息
function delContextById(id,pageNo) {
	// 1
	// const index = contentList.findIndex(item=>item.id === id);
	// contentList.splice(index,1);
	// render();
	
	// 2
	contentList = contentList.filter(item => item.id !== id);
	render(pageNo);
}

// 根据ID进行顶与踩的操作,type->1顶 2踩
function upContentById(id, pageNo, type = 1) {
	// 1
	// const info = contentList.find(item => item.id === id);
	// if (type === 1) info.topNum++;
	// else if (type === 2) info.downNum++;
	
	// 2
	contentList = contentList.map(item => {
		if (item.id === id) type === 1 ? item.topNum++ : item.downNum++;
		return item;
	})
	render(pageNo);
}

render();

// 更新视图
function render(pageNo = 1) {
	const pageSize = 3;// 每页显示的条数
	// 总页数
	let pageSum = Math.ceil(contentList.length / pageSize);// 1
	// 判断总页码是否小于1，如果小于1，那么让其为1
	if (pageSum < 1) pageSum = 1;
	// 页码如果大于总页数，那么就让当前页码为总页数
	if(pageNo>pageSum) pageNo = pageSum;
	// 生成截取数据的起始位置
	let start = (pageNo - 1) * pageSize;
	// 结束位置
	let end = start + pageSize;
	
	commentOn.innerHTML = (`
		<div style="display:${contentList.length > 0 ? 'none' : 'block'}" class="noContent">暂无留言</div>
        <div class="messList">
            ${
		contentList.slice(start, end).map(item => (`
					<div class="reply">
		                <p class="replyContent">${item.context}</p>
		                <p class="operation">
		                    <span class="replyTime">${item.addTime}</span>
		                    <span class="handle">
		                        <a href="javascript:;" onclick="upContentById('${item.id}',${pageNo})" class="top">${item.topNum}</a>
		                        <a href="javascript:;" onclick="upContentById('${item.id}',${pageNo},2)" class="down_icon">${item.downNum}</a>
		                        <a onclick="delContextById('${item.id}',${pageNo})" href="javascript:;" class="cut">删除</a>
		                    </span>
		                </p>
		            </div>
				`)).join("")
	}
        
        </div>
        <div class="page">
            ${new Array(pageSum).fill().map(function (item, index) {
		return (`
					<a onclick="render(${index + 1})" href="javascript:;" class="${pageNo === (index + 1) ? 'active' : ''}">${index + 1}</a>
				`)
	}).join("")}
        </div>
	`)
}